import {
    Avatar, Button,
    Dropdown,
    DropdownItem,
    DropdownMenu,
    DropdownTrigger,
    Input,
    Modal, ModalBody, ModalContent, ModalFooter, ModalHeader,
    NavbarContent, Textarea, Tooltip, useDisclosure
} from "@nextui-org/react";
import {MailIcon, SearchIcon} from "@nextui-org/shared-icons";
import React, {useState} from "react";
import {FiUser} from "react-icons/fi";
import {MdMoreTime} from "react-icons/md";
import UserInfoService from "@/app/service/userInfoService";
import cookie from "react-cookies";
import {Token, UserName} from "@/app/constants/authTokenConstants";
import {decodeFromBase64} from "next/dist/build/webpack/loaders/utils";

/**
 * 个人中心头像点击时的组件和状态
 * @param username
 * @param isExit
 * @param setExit
 * @constructor
 */
export default function OnAuthenticatedNavbarContent({username, isExit, setExit}: any) {
    const {isOpen, onOpen, onOpenChange} = useDisclosure();

    /*邮箱和创建时间状态*/
    const [email, setEmail] = useState('');
    const [createTime, setCreateTime] = useState('');
    const token = cookie.load(Token).substring(7) + "***********";

    /*获取个人信息*/
    function functionOpen() {
        onOpen();
        UserInfoService({setEmail, setCreateTime}).then(r => {
        });
    }

    return (
        <>
            <NavbarContent as="div" className="items-center" justify="end">
                <Input
                    classNames={{
                        base: "lg:flex max-w-full sm:max-w-[7rem] h-8",
                        mainWrapper: "h-full",
                        input: "text-small",
                        inputWrapper: "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
                    }}
                    placeholder="search..."
                    size="sm"
                    startContent={<SearchIcon fontSize={18}/>}
                    type="text"
                />
                <Dropdown placement="bottom-end" backdrop={"blur"}>
                    <DropdownTrigger>
                        <Avatar
                            isBordered
                            as="button"
                            radius={"lg"}
                            className="transition-transform min-w-fit"
                            color="primary"
                            name={username}
                            size="sm"
                            src="https://baiyunshan.flowus.cn/public%2Fe8be5d93-efd7-4efe-9da8-f41d86956b83%2F42428313-3e08-4d25-957c-64e18b5bb15f.jpg?img_process=/resize,w_1000/quality,q_100/"
                        />
                    </DropdownTrigger>
                    <DropdownMenu aria-label="Profile Actions" variant="flat">
                        <DropdownItem key="profile" className="h-14 gap-2">
                            <p className="font-semibold">&nbsp;Hi,{username}</p>
                            <p className="font-semibold">📝 | 🥳 | ❤️</p>
                        </DropdownItem>
                        <DropdownItem key="settings" color={"success"} onClick={functionOpen}>个人中心</DropdownItem>
                        <DropdownItem key="logout" color="danger" onPress={() => {
                            setExit(!isExit)
                        }}>退出登录</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </NavbarContent>
            {/*个人信息*/}
            <Modal backdrop={"blur"} isOpen={isOpen} onOpenChange={onOpenChange} placement={"center"}>
                <ModalContent>
                    {
                        onClose => (
                            <>
                                <ModalHeader className={"flex flex-col gap-1"}>个人信息</ModalHeader>
                                <ModalBody>
                                    <Input
                                        isReadOnly
                                        id={'username'}
                                        type="text"
                                        label="用 户 名"
                                        variant={"faded"}
                                        placeholder={decodeFromBase64(cookie.load(UserName)).toString()}
                                        labelPlacement="outside"
                                        startContent={
                                            <FiUser
                                                className="text-2xl text-default-300 pointer-events-none flex-shrink-0"/>
                                        }
                                    />
                                    <Input
                                        isReadOnly
                                        id={'email'}
                                        type="email"
                                        label="邮 箱"
                                        variant={"faded"}
                                        placeholder={email}
                                        labelPlacement="outside"
                                        startContent={
                                            <MailIcon
                                                className="text-2xl text-default-300 pointer-events-none flex-shrink-0"/>
                                        }
                                    />
                                    <Input
                                        isReadOnly
                                        id={'regTime'}
                                        type="text"
                                        label="入 驻 期"
                                        variant={"faded"}
                                        placeholder={createTime}
                                        labelPlacement="outside"
                                        startContent={
                                            <MdMoreTime
                                                className="text-2xl text-default-300 pointer-events-none flex-shrink-0"/>
                                        }
                                    />
                                    <Tooltip content={"账号安全认证码"} color={"danger"} className="capitalize"
                                             offset={15}
                                             delay={0}
                                             closeDelay={0}
                                             motionProps={{
                                                 variants: {
                                                     exit: {
                                                         opacity: 0,
                                                         transition: {
                                                             duration: 0.1,
                                                             ease: "easeIn",
                                                         }
                                                     },
                                                     enter: {
                                                         opacity: 1,
                                                         transition: {
                                                             duration: 0.15,
                                                             ease: "easeOut",
                                                         }
                                                     },
                                                 },
                                             }}
                                    >
                                        <Textarea
                                            isReadOnly
                                            id={'token'}
                                            className={"break-all"}
                                            type="text"
                                            label="安 全 码"
                                            variant={"flat"}
                                            placeholder={token}
                                            labelPlacement="outside"
                                            color={"danger"}
                                        />
                                    </Tooltip>
                                </ModalBody>
                                <ModalFooter>
                                    <Button className={"w-1/3"} variant={"shadow"} color="primary" onClick={onClose}>
                                        Yee. 🤩
                                    </Button>
                                </ModalFooter>
                            </>
                        )
                    }
                </ModalContent>
            </Modal>
        </>
    )
}
